{extend name="admin@public/base" /}
{block name="styles"}
<link rel="stylesheet" href="__PUBLIC__/bootstrap-select/css/bootstrap-select.min.css" />
<link rel="stylesheet" type="text/css" href="__PUBLIC__/jQuery-Validation-Engine-2.6.2-ciaoca/css/validationEngine.jquery.css">
<script type="text/javascript" src="__PUBLIC__/jQuery-Validation-Engine-2.6.2-ciaoca/js/jquery.validationEngine-zh_CN.js"></script>
<script type="text/javascript" src="__PUBLIC__/jQuery-Validation-Engine-2.6.2-ciaoca/js/jquery.validationEngine.min.js"></script>
{/block}
{block name="main-content"}
<div class="page-content">
    <div class="page-header">
        <h1>
            您当前操作
            <small>
                <i class="ace-icon fa fa-angle-double-right"></i>
                修改资讯
            </small>
        </h1>
    </div>

    <div class="row">
        <div class="col-xs-12">
            <form class="form-horizontal ajaxForm" method="post" action="{:url('admin/Announce/doEdit')}">
                <div class="form-group">
                    <label class="col-sm-2 control-label no-padding-right" for="title"> <span class="red">*</span>资讯标题：  </label>
                    <div class="col-sm-10">
                        <input type="text" name="title" id="title" value="{$info.title}" class="col-xs-10 col-sm-5 validate[required]"/>
                        <input type="hidden" name="id" value="{$info.id}">
                        <input type="hidden" name="img_id" value="{$info.url}">
                    </div>
                </div>
                <div class="space-4"></div>

                <div class="form-group">
                    <label class="col-sm-2 control-label no-padding-right" for="subtitle"> <span class="red">*</span>副标题：  </label>
                    <div class="col-sm-10">
                        <input type="text" name="subtitle" id="subtitle" value="{$info.subtitle}" class="col-xs-10 col-sm-5 validate[required]"/>
                    </div>
                </div>
                <div class="space-4"></div>

                <div class="form-group">
                    <label class="col-sm-2 control-label no-padding-right">资讯内容：  </label>
                    <div class="col-sm-10">
                        <textarea name="content" class="col-xs-10 col-sm-5 validate[required]">{$info.content}</textarea>
                    </div>
                </div>
                <div class="space-4"></div>

                <div class="form-group" style="margin:0 0 20px 210px">
                    <span class="red">*</span>
                    <a url="{:url('Upload/index',array('type'=>'schedule'))}" class="action-buttons upload" food_id="{$info.id}" img_id="{$info.url}" style="color:black">
                        <i class="ace-icon fa fa-upload bigger-110">上传图片 : </i>
                    </a>
                    <div style="margin:-20px 0 0 100px">
                        <ul class="ace-thumbnails clearfix" id="getpicture">
                            {notempty name="$info.url"}
                                <li id="pic_{$info.img_id}">
                                    <a href="__PUBLIC__/uploads/{$info.url}" data-rel="colorbox"><img src="__PUBLIC__/uploads/{$info.url}" width="100" height="100"></a>
                                    <div class="tools">
                                        <a href="#" onclick="del({$info.img_id})">
                                            <i class="ace-icon fa fa-times red"></i>
                                        </a>
                                        <a href="#" class="down_btn_a" va="pic_{$info.img_id}">
                                            <i class="ace-icon glyphicon glyphicon-download green"></i>
                                        </a>
                                    </div>
                                </li>
                            {/notempty}
                        </ul>
                    </div>
                </div>
                <input type="hidden" name="picture" value="">
                <div class="space-4"></div>


                <div class="clearfix form-actions">
                    <div class="col-md-offset-3 col-md-9">
                        <button class="btn btn-info" type="submit">
                            <i class="ace-icon fa fa-check bigger-110"></i>
                            保存
                        </button>
                        &nbsp; &nbsp; &nbsp;
                        <button class="btn" type="reset">
                            <i class="ace-icon fa fa-undo bigger-110"></i>
                            重置
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
{/block}
{block name="scripts"}
<script src="__PUBLIC__/bootstrap-select/js/bootstrap-select.min.js"></script>
<script src="__PUBLIC__/assets/js/jquery.colorbox.min.js"></script>

<!-- ace scripts -->
<script src="__PUBLIC__/assets/js/ace-elements.min.js"></script>
<script>
    $('.form-horizontal').validationEngine('attach',{
            promptPosition: 'bottomLeft',
            addPromptClass: 'formError-white',
            showOneMessage: true
        });

    //删除图片
    function del(pic_id){
        if(pic_id){
            $.post('/Announce/delPic',{id:pic_id},function(data){
                if(data.status == 1){
                    $('.upload').attr('img_id', '');
                    $("input[name='img_id']").val('');
                    $('#pic_'+pic_id).remove();
                    // var va = $('.ace-thumbnails').html();
                    // if($('.ace-thumbnails').children().length == 0){
                    //     $('.ace-thumbnails').html('无');
                    // }
                }
                layer.msg(data.msg);
            },'json')
        }
    }

    //上传
    $('.upload').on('click',function(){
        var food_id = $(this).attr('food_id');
        var url = $(this).attr('url');
        var img_id = $(this).attr('img_id');

        if(img_id){
            layer.alert('已经添加过图片', {
                icon: 5
            });
            return;
        }
        var index = layer.open({
            type: 2,
            title: '上传图片',
            content: url,
            area: ['50%', '420px'],
            cancel: function(index, layero){
                // location.reload();
                var data = $(layero).find("iframe")[0].contentWindow.picture;

                //异步传输
                $.post('/Announce/addPic',{info:data,food_id:food_id},function(data){
                    if(data.status == 1){
                        var info = data.arr;
                        for(var i=0;i<info.length;i++){
                            var img = '<li id="pic_'+info[i].id+'" url="'+info[i].url+'"><a href="__PUBLIC__/uploads/'+info[i].url+'" data-rel="colorbox"><img src=__PUBLIC__/uploads/'+info[i].url+' width="100" height="100"></a><div class="tools" style="height:25px"><a href="javascript:void(0)" onclick="del('+info[i].id+')"><i class="ace-icon fa fa-times red"></i></a></div></li>';
                            $('.upload').attr('img_id', info[i].url);
                            $("input[name='img_id']").val(info[i].url);
                            $("#getpicture").append(img);

                            //点击图片放大效果
                            jQuery(function($) {
                                var $overflow = '';
                                var colorbox_params = {
                                    rel: 'colorbox',
                                    reposition:true,
                                    scalePhotos:false,
                                    scrolling:true,
                                    previous:'<i class="ace-icon fa fa-arrow-left"></i>',
                                    next:'<i class="ace-icon fa fa-arrow-right"></i>',
                                    close:'&times;',
                                    current:'{current} of {total}',
                                    maxWidth:'100%',
                                    maxHeight:'100%',
                                    onOpen:function(){

                                    },
                                    onClosed:function(){
                                        document.body.style.overflow = $overflow;
                                    },
                                    onComplete:function(){
                                        $.colorbox.resize();
                                    }
                                };

                                $('.ace-thumbnails [data-rel="colorbox"]').colorbox(colorbox_params);
                                $("#cboxLoadingGraphic").html("<i class='ace-icon fa fa-spinner orange fa-spin'></i>");//let's add a custom loading icon


                                $(document).one('ajaxloadstart.page', function(e) {
                                    $('#colorbox, #cboxOverlay').remove();
                                });
                            })
                        }
                    }
                });
            }
        });
    });

    //点击图片放大效果
    jQuery(function($) {
        var $overflow = '';
        var colorbox_params = {
            rel: 'colorbox',
            reposition:true,
            scalePhotos:false,
            scrolling:true,
            previous:'<i class="ace-icon fa fa-arrow-left"></i>',
            next:'<i class="ace-icon fa fa-arrow-right"></i>',
            close:'&times;',
            current:'{current} of {total}',
            maxWidth:'100%',
            maxHeight:'100%',
            onOpen:function(){

            },
            onClosed:function(){
                document.body.style.overflow = $overflow;
            },
            onComplete:function(){
                $.colorbox.resize();
            }
        };

        $('.ace-thumbnails [data-rel="colorbox"]').colorbox(colorbox_params);
        $("#cboxLoadingGraphic").html("<i class='ace-icon fa fa-spinner orange fa-spin'></i>");//let's add a custom loading icon


        $(document).one('ajaxloadstart.page', function(e) {
            $('#colorbox, #cboxOverlay').remove();
        });
    });

    //判断是否为Trident内核浏览器(IE等)函数
    function browserIsIe() {
        if (!!window.ActiveXObject || "ActiveXObject" in window){
            return true;
        }
        else{
            return false;
        }
    }
    //创建iframe并赋值的函数,传入参数为图片的src属性值.
    function createIframe(imgSrc) {
        //如果隐藏的iframe不存在则创建
        if ($("#IframeReportImg").length === 0){
            $('<iframe style="display:none;" id="IframeReportImg" name="IframeReportImg" onload="downloadImg();" width="0" height="0" src="about:blank"></iframe>').appendTo("body");
        }
        //iframe的src属性如不指向图片地址,则手动修改,加载图片
        if ($('#IframeReportImg').attr("src") != imgSrc) {
            $('#IframeReportImg').attr("src",imgSrc);
        } else {
            //如指向图片地址,直接调用下载方法
            downloadImg();
        }
    }
    //本地下载图片的函数
    function downloadImg() {
        //iframe的src属性不为空,调用execCommand(),保存图片
        if ($('#IframeReportImg').src != "about:blank") {
            window.frames["IframeReportImg"].document.execCommand("SaveAs");
        }
    }
    //接下来进行事件绑定
    var aBtn = $(".down_btn_a");
    if (browserIsIe()) {
        //如果浏览器是ie等,绑定事件
        aBtn.on("click", function() {
            id = $(this).attr('va');
            var imgSrc = $(this).parents('#'+id).find('img').attr("src");
            //调用创建iframe的函数
            createIframe(imgSrc);
        });
    } else {
        aBtn.each(function(i,v){
            //支持download,添加属性.
            id = $(this).attr('va');
            var imgSrc = $(v).parents('#'+id).find('img').attr("src");
            $(v).attr("download",imgSrc);
            $(v).attr("href",imgSrc);
        })
    }

</script>
{/block}